<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>鼠标移动事件</title>
	<script src="jquery-3.4.1.min.js"></script>
<style type="text/css">
	*{
		margin:0 0;
		padding:0 0;
	}
	/* div{
		width: 300px;height: 300px;background: red;
		
		position: absolute;
		left: 100px;
		top: 100px;
	} */

	.img{
		width: 100px;
		height: 100px;
		background: pink;
	}

	#logo{
		position: absolute;
		left: -100px;
		top: -100px;
	}



</style>
</head>
<body>
	
	<!-- <div id="dv"></div> -->
	<div class="img" id="logo"></div>

<script type="text/javascript">


	var logo = document.getElementById('logo')


	window.onmousemove = function(e){
		var event = e || window.event;

		//console.log("x:"+event.clientX+"---------"+"y:"+event.clientY)//鼠标位置
		//console.log("x:"+event.screenX+"---------"+"y:"+event.screenY)//屏幕位置
		var x = event.clientX
		var y = event.clientY
		if(x<=50 || x>=(document.body.clientWidth-logo.offsetWidth+50)){
			x=-100;
		}
		if(y<=50){
			y=-100;
		}

		logo.style.left = x-50+"px"
		logo.style.top = y-50+"px"

	}



</script>


</body>
</html>